<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="reset.css">
    <title>Document</title>
    <style>
        html{
            font-family: -apple-system,system-ui,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif,BlinkMacSystemFont,Helvetica Neue,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Arial;
        }
        body{
            background-color:#f5f5f5;
        }
        .header{
            height: 60px;
            background-color: #ffffff;
        }
        .header-c{
            width: 1160px;
            height: 60px;
            margin: 0 auto;
        }
        .logo{
            width: 121px;
            height: 60px;
            background: url(ima/bfan-LOGO.png) no-repeat center;
            background-size: 100% auto;
            float: left;
        }
        .nav{
            width: 500px;
            height: 60px;
            float: right;
        }
        li{
            display: inline-block;
            width: 64px;
            height: 60px;
            font-family: sans-serif;
            font-weight: 700;
            line-height: 60px;
            font-size: 14px;
            text-align: center;
            margin-left: 40px;
            /* color: #333333; */
            /* margin-top: -2px; */
        }
        a{
            color: #666666;
        }
        .first{
            /* color: #333333; */
        }
        .mar0{
            margin-left: 0;
        }
        .line{
            width: 64px;
            height: 2px;
            background-color: #865eff;
            visibility: hidden;
            margin-top: -2px;
        }
        li:hover .line{
            visibility: visible;
        }
        .line-one{
            width: 64px;
            height: 2px;
            background-color: #865eff;
            visibility: visible;
            margin-top: -2px;
        }
        li:hover a{
            color: #333333;
            /* font-size: 16px; */
            font-weight: 900;
        }
        .web-item{
            width: 64px;
            height: 32px;
            background-color: #1db0e6;
            color: white;
            float: left;
            line-height: 32px;
            margin: 0 auto;
        }
        .web,
        .web2,
        .web1,
        .web3,
        .web4{
            visibility: hidden;
        }
        li:hover .web{
            visibility: visible;
        }
        .two:hover .web1{
            visibility: visible;
        }
        li:hover .web2{
            visibility: visible;
        }
        li:hover .web3{
            visibility: visible;
        }
        li:hover .web4{
            visibility: visible;
        }
        .sort{
            width: 1160px;
            height: 24px;
            margin: 0 auto;
            margin-top: 48px;
        }
        .sort-item{
            width: 70px;
            height: 24px;
            line-height: 24px;
            color: #333333;
            border-radius: 2px;
            float: left;
            margin-right:20px ;
            font-size: 14px;
            font-weight: 700;
            text-align: center;
            font-family: 'ali-regular';
            margin-right: ;
            /* background-image: linear-gradient(-40deg, #A066FC 0%, #5939EC 100%) */
        }
        .sort-item1{
            width: 70px;
            height: 24px;
            line-height: 24px;
            color: #ffffff;
            border-radius: 6px;
            float: left;
            font-size: 14px;
            font-weight: 700;
            text-align: center;
            font-family: 'ali-regular';
            margin-right:20px ;
            background-image: linear-gradient(-40deg, #A066FC 0%, #5939EC 100%)
        }
        .sort:hover .sort-item1{
            color: white;
            background-image: linear-gradient(-40deg, #A066FC 0%, #5939EC 100%)
        }
        .talk-list{
            width: 1160px;
            height: 1064px;
            margin: 0 auto;
            font-size: 0;
            /* margin-top: 35px; */
        }
        .left{
            width: 550px;
            height: 230px;
            float: left;
            margin-top: 35px;
        }
        .right{
            float: right;
            margin-top: 35px;
        }
        .image{
            width: 550px;
            height: 200px;
            border-radius: 6px;
        }
        .des{
            color: #666;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            line-height: 20px;
            margin-top: 10px;
            font-size: 14px;
            font-weight: 700;
        }
        .more{
            width: 198px;
            height: 48px;
            font-size: 16px;
            color: #666666;
            text-align: center;
            line-height: 48px;
            margin: 0 auto;
            margin-top: 50px;
            border: 1px solid #ACACAC;
            border-radius: 5px;
        }
        .more:hover{
            color: white;
            background-image: linear-gradient(-40deg, #A066FC 0%, #5939EC 100%)
        }
    </style>
</head>
<body>
    <div class="header">
        <div class="header-c">
            <div class="logo"></div>
            <ul class="nav">
                <li class="mar0">
                    <a class="first" href="">首页</a>
                    <div class="line-one"></div>
                    <ul class="web">
                        <li class="web-item">HTML</li>
                        <li class="web-item">CSS</li>
                        <li class="web-item">JS</li>
                    </ul>
                </li>
                <li class="two">
                    <a  href="">前端开发</a>
                    <div class="line"></div>
                    <ul class="web1">
                        <li class="web-item">HTML</li>
                        <li class="web-item">CSS</li>
                        <li class="web-item">JS</li>
                    </ul>
                </li>
                <li class="three">
                    <a  href="">UI设计</a>
                    <div class="line"></div>
                    <ul class="web2">
                        <li class="web-item">HTML</li>
                        <li class="web-item">CSS</li>
                        <li class="web-item">JS</li>
                    </ul>
                </li>
                <li class="four">
                    <a  href="">不凡说</a>
                    <div class="line"></div>
                    <ul class="web3">
                        <li class="web-item">HTML</li>
                        <li class="web-item">CSS</li>
                        <li class="web-item">JS</li>
                    </ul>
                </li>
                <li class="five">
                    <a  href="">导航</a>
                    <div class="line"></div>
                    <ul class="web4">
                        <li class="web-item">HTML</li>
                        <li class="web-item">CSS</li>
                        <li class="web-item">JS</li>
                    </ul>
            </ul>
            </div>
        </div>
    </div>
    <div class="sort">
        <div class="sort-item1">全部</div>
        <div class="sort-item">前端开发</div>
        <div class="sort-item">UI设计</div>
    </div>
    <div class="talk-list">
        <div class="left">
            <img class="image" src="https://bufanweb3.oss-cn-beijing.aliyuncs.com/webdev/20200119150205.jpg" alt="">
            <p class="des">怎么在vue脚手架中解决跨域</p>
        </div>
        <div class="right">
                <img class="image" src="https://bufanweb3.oss-cn-beijing.aliyuncs.com/webdev/20200119110601.jpg" alt="">
                <p class="des">jS元素拖拽的那些事儿</p>
        </div>
        <div class="left">
            <img class="image" src="https://bufanweb3.oss-cn-beijing.aliyuncs.com/websit/20200110105204.jpg" alt="">
            <p class="des">怎么写代码才能看起来像一位老司机？</p>
        </div>
        <div class="right">
                <img class="image" src="https://bufanweb3.oss-cn-beijing.aliyuncs.com/websit/20200108154426.png" alt="">
                <p class="des">如何制作C4D立体像素风格</p>
        </div>
        <div class="left">
            <img class="image" src="https://bufanweb3.oss-cn-beijing.aliyuncs.com/webdev/20200507144241.png" alt="">
            <p class="des">前端培训/转行，必看指南！</p>
        </div>
        <div class="right">
                <img class="image" src="https://bufanweb3.oss-cn-beijing.aliyuncs.com/websit/20200110145228.png" alt="">
                <p class="des">聊聊交互设计的纸面原型</p>
        </div>
        <div class="left">
            <img class="image" src="https://bufanweb3.oss-cn-beijing.aliyuncs.com/websit/20200110105211.jpg" alt="">
            <p class="des">前端开发中值得推荐的常用工具</p>
        </div>
        <div class="right">
                <img class="image" src="https://bufanweb3.oss-cn-beijing.aliyuncs.com/websit/20200108163558.png" alt="">
                <p class="des">你真的了解UI设计吗？</p>
        </div>    
    </div>
    <div class="more">
        更多
    </div>
</body>
</html>